<template>
  <div class="shop-detail-container">
    <Header
      title="店内自选"
      :clickLeft="clickLeft"
    />
    <div class='shop-banner'>
      <div class='shop-banner-pic' :style="`background-image: url('${storeData.Icon}');`"></div>
      <div class='shop-head'>
        <img class='shop-logo' :src='storeData.Icon' @click='toShop' />
        <div @click='toShop'>
          <div class='shop-name'>{{storeData.Name}} ></div>
          <div class='shop-spec'>
            <div class='shop-num'>月销{{storeData.SaleCount}}单</div>
          </div>
          <div class='shop-info'>
            <div class='shop-pay'><i class="member-tip">会员专享</i><span>{{storeData.Manjian}}</span></div>
          </div>
        </div>
        <!-- bindtap='toScore' -->
        <div class='shop-score'>
          <img src='../../assets/score.png' />
          <div class='shop-score-text'>{{storeData.Score}}</div>
          <div>评分</div>
        </div>
      </div>
    </div>
    <div class="banner-list" v-if="storeData.Banners && storeData.Banners.length > 0">
      <Swipe :autoplay="4000">
        <SwipeItem v-for="(item, index) in storeData.Banners" :key="index">
          <img :src="item.Image" alt="">
        </SwipeItem>
      </Swipe>
    </div>
    <div class="booking-goods-container" v-show="bookGoodsList.length > 0">
      <h1>商家预售</h1>
      <div class="list">
        <div class="scrolldiv">
          <BookingGoodsItem
            class="item"
            v-for="item in bookGoodsList"
            :key="item.Id"
            :data="item"
            @change="onGoodsNumChange"
            @select="onGoodsSelect"
          />
          <div class="plac"></div>
        </div>
      </div>
    </div>
    <div class="main-container van-main-container">
      <div class="left-container" :class="{'scroll': isShowScroll}">
        <div class="menu-list">
          <div
            class="menu-item"
            v-for="(item, index) in categoryData"
            :key="item.Id"
            :class="{'on': menuIndex === index}"
            @click="selectMenu(index)"
          >{{item.Name}} <span>{{categoryNums[item.Id]}}</span> </div>
          <div class="cart-footer-plac"></div>
        </div>
      </div>
      <div class="right-container" :class="{'scroll': isShowScroll}" ref="goodsContainer">
        <Tabs v-model="tabIndex">
          <Tab :title="tab.Name" v-for="tab in categoryChildData" :key="tab.Id"></Tab>
        </Tabs>
        <div class="lists">
          <div class="list-container" v-for="item in showGoodsList.goods" :key="item.CategoryId">
            <h1 :id="item.title">{{item.title}}</h1>
            <div class="list">
              <GoodsItem
                v-for="goods in item.list"
                :key="goods.Id"
                :data="goods"
                @change="onGoodsNumChange"
                @select="onGoodsSelect"
              />
              <div class="cart-footer-plac"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cart-footer" :class="{'has': shopCartInfo.totalNum > 0}">
      <div
        class="goods-cart"
        @click='showCartList'
      >
        <div class="cart-icon iconfont icon-cart">
        </div>
        <span class="cart-num">{{shopCartInfo.totalNum}}</span>
      </div>
      <div class="cart-spec">未选购商品,配送费结算页面计算</div>
      <div class='cart-opt'>
        <div class="cart-total">¥{{shopCartInfo.totalPrice}}</div>
        <div class="confirm" @click='toConfirm'>
          去结算
        </div>
      </div>
    </div>
    <Popup position="bottom" v-model="isShowCartList">
      <div class="cart-list-container">
        <div class="cart-header">
          <p class="title">已选商品</p>
          <a class='pop-cart-empty' @click='clearCartData'>
            <i class='iconfont icon-delete'></i>清空
          </a>
        </div>
        <div class="scrolldiv">
          <div class="cart-list" v-for="(list, key) in cartData" :key="key">
            <CartGoodsItem
              @change="onCartGoodsNumChange"
              v-for="item in list"
              :key="item.Id"
              :data="item"
            />
          </div>
        </div>
        <div class="cart-footer-plac"></div>
      </div>
    </Popup>
    <Popup position="bottom" v-model="isShowSelectType" class="selectTypePopup">
      <div class='format-container'>
        <div class='header'>
          <div class='media'>
            <img class='media-pic' :src='formatData.Image' />
          </div>
          <div class='content'>
            <div class='format-close iconfont icon-roundclose' @click='isShowSelectType = false'></div>
            <span class='title'>{{formatData.Name}}</span>
            <span class='desc'>已选：{{selectFormatData.Name}}</span>
            <span class='price'>¥{{selectFormatData.Price}}</span>
          </div>
        </div>
        <div class='format-box'>
          <span class='title'>规格</span>
          <div class='list'>
            <div
              class="item"
              v-for="format in formatData.Formats"
              :class="{'selected': selectFormatData.Id === format.Id}"
              :key="format.Id"
              @click='selectFormatData = format'>{{format.Name}}</div>
          </div>
        </div>
        <div class='btn-plac'></div>
        <div class='btn' @click='addMultiGoods'>选好了</div>
      </div>
    </Popup>
  </div>
</template>
<script>
import Header from '@/components/Header'
import GoodsItem from '@/components/GoodsItem'
import CartGoodsItem from '@/components/CartGoodsItem'
import BookingGoodsItem from '@/components/BookingGoodsItem'
import { readCartData, saveCartData } from '../../utils/cart';
import { Tab, Tabs, Popup, Toast, Swipe, SwipeItem, Dialog } from 'vant';
export default {
  components: {
    Header,
    Tab,
    Tabs,
    Popup,
    GoodsItem,
    CartGoodsItem,
    BookingGoodsItem,
    Swipe,
    SwipeItem
  },
  data() {
    return {
      loading: false,
      isShowScroll: false,
      storeId: null,
      isShowCartList: false,
      isShowSelectType: false,
      shopCartInfo: {
        totalNum: 0,
        totalPrice: 0,
      },
      formatData: {},
      selectFormatData: {},
      menuIndex: 0,
      tabIndex: 0,
      categoryData: [],
      showCategoryData: {},
      categoryChildData: [],
      goodsList: [],
      bookGoodsList: [],
      showGoodsList: {
        goods: []
      },
      cartData: {},
      categoryNums: {},
      storeData: {},
      action: ''
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.loading = false;
      }, 0);
    },
    getCategoryNum() {
      const { cartData } = this;
      const result = {};
      Object.keys(cartData).map(key => {
        result[key] = cartData[key].length;
      })
      return result;
    },
    toConfirm() {
      saveCartData(this.storeId, this.cartData);
      this.$route.meta.notKeepAlive = true;
      this.$store.commit('SET_CARTDATA', this.cartData);
      this.$router.replace(`/order/confirm/${this.storeId}`);
    },
    showCartList() {
      if (this.shopCartInfo.totalNum > 0) {
        this.isShowCartList = true;
      }
    },
    addMultiGoods() {
      const { Id, Num } = this.selectFormatData;
      this.updateGoodsNum(Id, 1, Num + 1);
      this.showGoodsList = this.getShowGoodsList(this.goodsList, this.showCategoryData.Id);
      this.isShowSelectType = false;
    },
    /**
     * 选择多规格商品回调
     */
    onGoodsSelect({ data, type }) {
      if (this.hasCartDataOtherType(this.cartData, type)) {
        Toast('预售商品不能和常规商品同时下单');
        return;
      }
      this.formatData = data;
      this.selectFormatData = data.Formats[0];
      this.isShowSelectType = true;
    },
    hasCartDataOtherType(cartData, type = 'normal') {
      return Object.keys(this.cartData).length > 0 &&
          this.cartData[Object.keys(this.cartData)[0]].length > 0 &&
          this.cartData[Object.keys(this.cartData)[0]][0].Type !== type
    },
    /**
     * 商品列表中商品数量变化回调
     */
    onGoodsNumChange({ value, id, changeValue, type, data }) {
      if (changeValue > 0 &&
          this.hasCartDataOtherType(this.cartData, type)
        ) {
        Toast('预售商品不能和常规商品同时下单');
        data.Num -= 1;
        return;
      }
      this.updateGoodsNum(id, changeValue, value);
    },
    /**
     * 购物车内商品数量变化回调
     */
    onCartGoodsNumChange({ value, id, changeValue }) {
      if (id) this.updateGoodsNum(id, changeValue, value);
      this.showGoodsList = this.getShowGoodsList(this.goodsList, this.showCategoryData.Id);
    },
    /**
     * 通过规格Id查找商品和规格的索引值
     */
    getGoodsFormatsIndex(id, goodsList) {
      let goodsIndex = -1;
      let formatIndex = -1;
      goodsList.forEach((goods, x) => {
        const y = goods.Formats.findIndex(format => format.Id === id);
        if (y > -1) {
          goodsIndex = x;
          formatIndex = y;
          return false;
        }
      })
      return { goodsIndex, formatIndex };
    },
    /**
     * 计算所有已选商品的数量
     */
    calcTotalGoodsNum(cartData) {
      const sumArray = Object.keys(cartData).map(key => cartData[key].map(item => item.Num))
      // 多维数组展开
      const sum = sumArray.join(',').split(',').map(item => Number(item)).reduce((prev, curr) => prev + curr);
      return sum === '' ? 0 : sum;
    },
    /**
     * 计算所有已选商品的总价
     */
    calcTotalGoodsPrice(cartData) {
      const sumArray = Object.keys(cartData).map(key => cartData[key].map(item => item.Num * item.Price))
      const sum = sumArray.join(',').split(',').map(item => Number(item)).reduce((prev, curr) => prev + curr);
      return sum === '' ? 0 : sum.toFixed(2);
    },
    /**
     * 刷新单个商品的总数量（计算Formats中Num）
     * id - 规格Id
     */
    refreshGoodsNum(id, goodsList) {
      const { goodsIndex } = this.getGoodsFormatsIndex(id, goodsList);
      const formats = goodsList[goodsIndex].Formats;
      const sum = formats.map(format => format.Num).reduce((prev, curr) => prev + curr);
      goodsList[goodsIndex].Num = sum;
      goodsList[goodsIndex].Show = sum > 0;
      return goodsList;
    },
    /**
     * 更新单个商品中单个规格的数量
     * id - 规格Id
     */
    updateGoodsNum(id, changeValue) {
      let { goodsList, bookGoodsList } = this;
      var { goodsIndex, formatIndex } = this.getGoodsFormatsIndex(id, goodsList);
      if (goodsIndex > -1) {
        // 常规商品
        goodsList[goodsIndex].Formats[formatIndex].Num = 
          goodsList[goodsIndex].Formats[formatIndex].Num ? 
          goodsList[goodsIndex].Formats[formatIndex].Num : 0;
        goodsList[goodsIndex].Formats[formatIndex].Num += changeValue;
        goodsList = this.refreshGoodsNum(id, goodsList);
        const formatData = goodsList[goodsIndex].Formats[formatIndex];
        const BaseCategoryId = goodsList[goodsIndex].BaseCategoryId;
        this.cartData = this.updateCartData(formatData, BaseCategoryId, goodsList[goodsIndex]);
        this.goodsList = goodsList;
      } else {
        // 预售商品
        console.log('bookGoodsList', bookGoodsList);
        console.log('id', id);
        var { goodsIndex, formatIndex } = this.getGoodsFormatsIndex(id, bookGoodsList);
        console.log('goodsIndex', goodsIndex);
        
        bookGoodsList[goodsIndex].Formats[formatIndex].Num = 
          bookGoodsList[goodsIndex].Formats[formatIndex].Num ? 
          bookGoodsList[goodsIndex].Formats[formatIndex].Num : 0;
        bookGoodsList[goodsIndex].Formats[formatIndex].Num += changeValue;
        bookGoodsList = this.refreshGoodsNum(id, bookGoodsList);
        const formatData = bookGoodsList[goodsIndex].Formats[formatIndex];
        this.cartData = this.updateCartData(formatData, 0, bookGoodsList[goodsIndex], 'booking');
        this.bookGoodsList = bookGoodsList;
      }
      this.categoryNums = this.getCategoryNum();
      this.shopCartInfo.totalNum = this.calcTotalGoodsNum(this.cartData);
      this.shopCartInfo.totalPrice = this.calcTotalGoodsPrice(this.cartData);
    },
    /**
     * 更新所有商品数量（依据购物车数据）
     */
    updateAllGoodsFromCartData() {
      const { cartData } = this;
      Object.keys(cartData).map(key => cartData[key].map(item => {
        this.updateGoodsNum(item.Id, item.Num);
      }))
    },
    updateCartData(formatData, categoryId, goodsData, type = 'normal') {
      const { cartData } = this;
      const copyCartData = { ...cartData };
      const formatId = formatData.Id;
      const num = formatData.Num;
      const cartFormatData = { ...formatData };
      if (goodsData.IsMulti) {
        cartFormatData.Name = goodsData.Name + cartFormatData.Name;
      } else {
        cartFormatData.Name = goodsData.Name;
      }
      cartFormatData.Type = type;
      cartFormatData.Image = goodsData.Image;
      if (copyCartData.hasOwnProperty(categoryId)) {
        const index = copyCartData[categoryId].findIndex(item => item.Id === formatId);
        if (index > -1 && num === 0) {
          copyCartData[categoryId].splice(index, 1);
          if (copyCartData[categoryId].length === 0) delete copyCartData[categoryId];
        } else if (index > -1) {
          copyCartData[categoryId][index].Num = num;
        } else {
          copyCartData[categoryId].push(cartFormatData);
        }
      } else {
        copyCartData[categoryId] = [cartFormatData];
      }
      console.log(copyCartData);
      return copyCartData;
    },
    selectMenu(index) {
      this.menuIndex = index;
      this.tabIndex = 0;
      this.showCategoryData = this.categoryData[index];
      this.categoryChildData = this.showCategoryData.Children;
      this.showGoodsList = this.getShowGoodsList(this.goodsList, this.showCategoryData.Id)
    },
    /**
     * 获取展示的商品数据（依据 baseCategoryId）
     */
    getShowGoodsList(goodsList, baseCategoryId) {
      const { categoryChildData } = this;
      const someBaseCategoryIdGoodsList = goodsList.filter(goods => goods.BaseCategoryId === baseCategoryId);
      const categoryIds = [...new Set(someBaseCategoryIdGoodsList.map(item => item.CategoryId))];
      const goods = categoryIds.map(categoryId => {
        const list = someBaseCategoryIdGoodsList.filter(item => item.CategoryId === categoryId).map(item => {
          let extraParams = {
            Id: item.Formats[0].Id,
          };
          if (typeof item.Num === 'undefined') {
            extraParams.Num = 0;
            extraParams.Show = false;
            item.Formats.map(item => {
              item.Num = 0;
            })
          }
          return {
            ...extraParams,
            ...item
          }
        });
        const title = categoryChildData.filter(item => item.Id === categoryId)[0].Name;
        return {
          list,
          title,
          CategoryId: categoryId
        }
      })
      this.categoryNums = this.getCategoryNum();
      return {
        goods,
        BaseCategoryId: baseCategoryId
      }
    },
    getBookingData() {
      return new Promise((resolve, reject) => {
        this.$http.store.bookingGoods({
          storeId: this.storeId
        }).then((ret) => {
          const data = ret.result;
          const result = data.map(item => {
            item.Num = 0;
            item.Id = item.Formats[0].Id;
            if (item.Formats.length === 1) {
              item.Formats[0].Price = item.Price;
            }
            // item.Price = item.Formats[0].Price;
            item.Formats = item.Formats.map(format => {
              return {
                Num: 0,
                ...format
              }
            })
            return item;
          })
          resolve(result);
        })
      })
    },
    /**
     * 清空购物车
     */
    clearCartData() {
      Dialog.confirm({
        title: '是否清空购物车？',
      }).then(() => {
        this.cartData = {};
        this.goodsList = this.clearNum(this.goodsList);
        this.bookGoodsList = this.clearNum(this.bookGoodsList);
        this.showGoodsList = this.getShowGoodsList(this.goodsList, this.showCategoryData.Id);
        this.shopCartInfo.totalNum = this.calcTotalGoodsNum(this.cartData);
        this.shopCartInfo.totalPrice = this.calcTotalGoodsPrice(this.cartData);
        this.isShowCartList = false;
        saveCartData(this.storeId, this.cartData);
      })
    },
    clearNum(goodsList) {
      return goodsList.map(goods => {
        goods.Num = 0;
        goods.Formats.map(format => {
          format.Num = 0;
          return format;
        })
        return goods;
      });
    },
    clickLeft() {
      const directUrl = this.$route.query.directUrl;
      saveCartData(this.storeId, this.cartData);
      this.$route.meta.notKeepAlive = true;
      if (directUrl) {
        this.$router.replace(directUrl);
      } else {
        this.$router.replace('/');
      }
    },
    toShop() {
      this.$router.push(`/shop/info/${this.storeId}`);
    },
    scrollEvent() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (
        window.innerHeight + scrollTop === document.documentElement.scrollHeight
        && !this.isShowScroll
      ) {
        this.isShowScroll = true;
      } else if (
        window.innerHeight + scrollTop !== document.documentElement.scrollHeight
        && this.isShowScroll
      ) {
        this.isShowScroll = false;
      }
    },
    getGoodsData() {
      return this.$http.store.goods({
        storeId: this.storeId
      })
    },
    getStoreData() {
      return this.$http.store.index({
        storeId: this.storeId
      });
    },
    getCategoryData() {
      return this.$http.store.category({
        storeId: this.storeId
      })
    },
    checkAction(action) {
      if (action === 'qr') {
        window.sessionStorage.setItem('qr-storeid', this.storeId);
      }
    },
    // 清除还在购物车中已下架的预售商品
    checkBookingGoodsInCart() {
      // const { cartData, bookGoodsList } = this;
      // if (!cartData[0]) {
      //   return;
      // }
      // if (bookGoodsList.length > 0) {
      //   cartData[0].forEach((item, x) => {
      //     bookGoodsList.forEach((goods, y) => {
      //       if (goods.Formats.findIndex(f => f.Id === item.Id) === -1) {
      //         cartData[0].splice(x, 1);
      //       }
      //     })
      //   })
      // }
      // if (bookGoodsList.length === 0 || cartData[0].length === 0) {
      //   delete cartData[0]
      // }
      // this.cartData = cartData;
      delete this.cartData['0']
    }
  },
  created() {
    Toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    })
    this.storeId = this.$route.params.id;
    this.checkAction(this.$route.query.action)
    this.getCategoryData().then(({ result }) => {
      this.categoryData = result;
      return this.getStoreData();
    }).then(({ result }) => {
      this.storeData = result;
      return this.getBookingData();
    }).then((result) => {
      this.bookGoodsList = result;
      console.log('bookGoodsList', result);
      return this.getGoodsData();
    }).then(({ result }) => {
      this.goodsList = result;
      this.selectMenu(0);
      this.cartData = readCartData(this.storeId);
      this.checkBookingGoodsInCart();
      console.log(this.cartData);
      if (Object.keys(this.cartData).length > 0) {
        this.updateAllGoodsFromCartData();
        this.showGoodsList = this.getShowGoodsList(this.goodsList, this.showCategoryData.Id);
        this.shopCartInfo.totalNum = this.calcTotalGoodsNum(this.cartData);
        this.shopCartInfo.totalPrice = this.calcTotalGoodsPrice(this.cartData);
      }
      Toast.clear();
    }).catch((err) => {
      Toast.clear();
      // Toast(err.msg);
    })
  },
  mounted() {
    window.addEventListener('scroll', this.scrollEvent);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.scrollEvent);
  },
  watch: {
    'tabIndex'() {
      const { categoryChildData, tabIndex } = this;
      const id = categoryChildData[tabIndex].Name;
      const elem = document.querySelector(`#${id}`);
      if (elem) elem.scrollIntoView();
    }
  }
}
</script>
<style lang="less" scoped>
.shop-detail-container{
  position: relative;
  .shop-banner {
    position: relative;
    padding: 0 20px;
  }
  .shop-banner-pic {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -140PX;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    filter: blur(15PX);
  }
  .shop-head {
    position: relative;
    padding: 20px 0 20px 140px;
    color: #fff;
  }

  .shop-logo {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 20px;
    left: 0;
    border: 2px solid #e7e7e7;
  }

  .shop-name {
    font-size: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 8px;
    text-align: left;
  }

  .shop-spec, .shop-distance {
    display: flex;
    font-size: 26px;
    align-items: center;
    line-height: 40px;
  }

  .shop-info {
    display: flex;
    font-size: 26px;
    align-items: center;
    justify-content: space-between;
    line-height: 40px;
  }
  .shop-pay{
    display: flex;
    align-items: center;
    i{
      width: 90px;
      max-width: 120px;
    }
    span{
      display: inline-block;
    }
  }

  .shop-score {
    position: absolute;
    right: 0;
    top: 20px;
    font-size: 22px;
    text-align: center;
    width: 90px;
    padding: 15px 0;
    line-height: 30px;
  }

  .shop-score-text {
    font-size: 28px;
  }

  .shop-score img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0.5;
    width: 90px;
    height: 90px;
  }
  .van-main-container{
    height: calc(100vh - 46px);
  }
  .banner-list{
    img{
      width: 700px;
      height: 120PX;
      margin: 20px auto;
      display: block;
      border-radius: 20px;
    }
  }
  .main-container{
    overflow: hidden;
    display: flex;
    position: relative;
    background-color: #fff;
    .left-container,
    .right-container{
      height: 100%;
      overflow: hidden;
      &.scroll{
        overflow: auto;
      }
    }
    .left-container{
      width: 160px;
      background: #f3f4f5;
      .menu-item {
        padding: 28px 10px;
        line-height: 28px;
        font-size: 26px;
        position: relative;
        text-align: center;
        span{
          position: absolute;
          padding: 0 10px;
          border-radius: 15px;
          background-color: #e51c24;
          color: #fff;
          font-size: 18px;
          right: 0;
          top: 0;
        }
        &.on{
          background: #fff;
        }
      }
      .menu-item-num {
        position: absolute;
        top: 4px;
        right: 6px;
        min-width: 16px;
        height: 26px;
        line-height: 24px;
        border-radius: 13px;
        background: #e51c24;
        color: #fff;
        font-size: 20px;
        text-align: center;
        padding: 0 8px;
      }
    }
    .right-container{
      width: calc(100% - 160px);
      background-color: #fff;
      .lists{
        .list-container{
          h1{
            text-align: left;
            padding: 20px 40px;
            line-height: 28px;
            font-size: 28px;
          }
        }
      }
    }
  }
  .cart-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #555;
    color: #fff;
    z-index: 10000;
    .goods-cart{
      position: absolute;
      top: -10px;
      left: 20px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      z-index: 899;
      background: #333;
      color: #fff;
      text-align: center;
    }
    .cart-icon {
      font-weight: 700;
      font-size: 40px;
      line-height: 80px;
    }
    .cart-num {
      display: none;
      position: absolute;
      right: -8px;
      top: -5px;
      min-width: 20px;
      height: 30px;
      line-height: 28px;
      border-radius: 15px;
      background: #e51c24;
      color: #fff;
      font-size: 21px;
      text-align: center;
      padding: 0 8px;
    }
    .cart-spec{
      width: 80%;
      font-size: 30px;
    }
    .cart-opt{
      display: none;
      width: 80%;
      height: 100%;
      justify-content: flex-end;
      align-items: center;
      .cart-total{
        font-size: 32px;
        margin-right: 20px;
      }
      .confirm{
        width: 200px;
        height: 100%;
        font-size: 32px;
        background-color: #e51c24;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    &.has{
      .cart-spec{
        display: none;
      }
      .cart-num{
        display: block;
      }
      .cart-opt{
        display: flex;
      }
      .goods-cart{
        background-color: #14a161;
      }
    }
  }
  .cart-list-container{
    .scrolldiv{
      max-height: 1000px;
      overflow: auto;
    }
    .cart-header{
      height: 40PX;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      font-size: 30px;
      background-color: #ecf4ef;
    }
  }
  .cart-footer-plac{
    height: 90px;
  }
  .format-container{
    background-color: #fff;
    min-height: 1100px;
    padding: 32px;
  }
  .format-container .media{
    width: 190px;
    height: 190px;
    float: left;
  }
  .format-container .media-pic{
    width: 100%;
    height: 100%;
  }
  .format-container .content{
    margin: 0 0 0 210px;
  }
  .format-container .content .title{
    display: block;
    font-size: 34px;
    margin-bottom: 16px;
  }
  .format-container .content .desc{
    display: block;
    font-size: 22px;
    height: 76px;
    color: #666;
  }
  .format-container .content .price{
    display: block;
    color: rgb(255, 83, 57);
    font-size: 48px;
  }
  .format-box .title{
    font-size: 28px;
    margin-bottom: 24px;
    display: block;
  }
  .format-box .list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .format-box .list .item{
    padding: 0 20px;
    margin: 0 24px 24px 0;
    border-radius: 8px;
    height: 64px;
    line-height: 64px;
    font-size: 26px;
    background-color: #f5f5f5;
    min-width: 170px;
    text-align: center;
    color: #333;
  }
  .format-box .list .item.selected{
    background-color: #14A161;
    color: #fff;
  }
  .format-container .btn-plac{
    height: 80px;
    display: block;
  }
  .format-container .btn {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    border-radius: 8px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-color: #14A161;
    color: #fff;
    font-size: 32px;
  }
  .format-close{
    float: right;
    font-size: 42px;
  }
  .selectTypePopup{
    z-index: 20000 !important;
  }

  .booking-goods-container{
    background-color: #fff;
    h1{
      line-height: 40px;
      font-size: 30px;
      padding: 20px;
      font-weight: 500;
    }
    .list{
      overflow-x: auto;
      .scrolldiv{
        width: 10000%;
        padding-left: 10px;
      }
      .item{
        float: left;
        margin: 0 10px 20px 10px;
      }
      .plac{
        width: 10px;
        height: 1px;
        float: left;
      }
    }
  }
}

</style>
<style lang="less">
.shop-detail-container{
  .van-tabs{
    background-color: #fff;
    z-index: 19;
    position: sticky;
    top: 0;
  }
  
}
</style>
